<template>
	<view class="page">
		<myNavBar barIcon="back" title="重置密码"></myNavBar>
		<view class="login-form">
			<view class="login-title">重置密码</view>
			<uni-forms style="margin-top: 100px;" :modelValue="loginForm" :rules="rules" validate-trigger="bind">
				<uni-forms-item name="phoneNum">
					<uni-easyinput type="number" v-model="loginForm.phoneNum" prefix-icon="phone" placeholder="手机号" />
				</uni-forms-item>
				<uni-forms-item class="yzm" name="yanzm">
					<uni-easyinput type="number" :clearable='false' v-model="loginForm.yanzm" prefix-icon="smallcircle"
						placeholder="验证码" />
					<view class="getCode" @click="getCode">
						{{codeText}}
					</view>
				</uni-forms-item>
				<uni-forms-item name="password">
					<uni-easyinput type="password" v-model="loginForm.password" prefix-icon="locked" placeholder="新密码" />
				</uni-forms-item>

				<button @click="submit" type="primary">重置</button>
			</uni-forms>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				loginForm: {
					terminal: 1, // APP终端
					phoneNum: '',
					yanzm: '',
					password: '',
				},
				index: 30,
				codeText: '发送验证码',
				timer: null,
				rules: {
					phoneNum: {
						rules: [{
							required: true,
							errorMessage: '请输入手机号',
						}, {
							pattern: /^(13|14|15|17|18|19)\d{9}$/,
							errorMessage: '手机号不正确',
						}]
					},
					yanzm: {
						rules: [{
							required: true,
							errorMessage: '请输入验证码',
						}]
					},
					password: {
						rules: [{
							required: true,
							errorMessage: '请输入密码',
						}]
					}
				}
			}
		},
		methods: {
			getCode() {
				if (this.codeText != '发送验证码') return
				if (!this.loginForm.phoneNum) {
					uni.showToast({
						title: '请输入手机号',
						icon: 'none'
					});
					return
				}
				if (this.loginForm.phoneNum.length == 11) {
					this.timer = setInterval(() => {
						this.codeText = '重新发送(' + this.index + 's)'
						if (this.index == 0) {
							this.codeText = '发送验证码'
							clearInterval(this.timer)
							this.index = 30
						} else {
							this.index -= 1
						}

					}, 1000)
				}
			},
			submit() {

				this.$http({
					url: '/register',
					data: this.loginForm,
					method: 'POST'
				}).then(loginInfo => {
					console.log("登录成功,自动跳转到聊天页面...")
					loginInfo.expireTime = new Date().getTime() + loginInfo.refreshTokenExpiresIn * 1000;
					uni.setStorageSync("loginInfo", loginInfo);
					// 调用App.vue的初始化方法
					getApp().init()
					// 跳转到聊天页面   
					uni.switchTab({
						url: "/pages/chat/chat"
					})
				})
			},
			goRegister() {
				uni.navigateTo({
					url: 'register/register',
				});
			}
		},

		onLoad() {}
	}
</script>

<style lang="scss" scoped>
	.login-form {
		margin: 50rpx;

		.login-title {
			margin-top: 100rpx;
			margin-bottom: 100rpx;
			color: royalblue;
			text-align: center;
			font-size: 60rpx;
			font-weight: 600;
		}
	}

	.yzm {
		position: relative;

		.getCode {
			position: absolute;
			top: 10rpx;
			right: 10rpx;
		}
	}
</style>